<template>
  <div>
    <el-dialog
      :title="toJobRoleData.jobOrRole == 'role' ? '角色' : '职务岗位'"
      :visible.sync="dialogVisible"
      @close="dialogVisibleClose"
      lock-scroll
      width="400px"
      destroy-on-close
    >
      <div class="dialog_div_new">
        <div class="dialog_middle">
          <el-form ref="ruleForm" :model="newData" :rules="rules">
            <el-form-item label="名称" prop="name">
              <el-input @blur="getNameToPinying" v-model="newData.name"></el-input>
              <el-button
                plain
                v-if="toJobRoleData.jobOrRole == 'role' && !isBaseVersion"
                @click="toPermissionSetting"
              >权限设置</el-button>
            </el-form-item>
            <!-- <el-form-item label="角色编码" prop="roleCode" v-if="toJobRoleData.jobOrRole == 'role'">
              <el-input v-model="newData.roleCode"></el-input>
            </el-form-item>-->
            <el-form-item label="排序码" prop="orderCode">
              <el-input v-model="newData.orderCode"></el-input>
            </el-form-item>
            <el-form-item label="拼音码" prop="pinYinCode">
              <el-input v-model="newData.pinYinCode"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="backup">
              <el-input v-model="newData.backup"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog_bottom">
          <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
          <el-button @click.stop="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { postAction, putAction } from '@/api/manage'
import { handleIsBaseVersion } from '@/utils'

export default {
  props: {
    toJobRoleData: Object,
  },
  data () {
    return {
      newData: {
        name: '',
        orderCode: '',
        pinYinCode: '',
        backup: '',
      },
      dialogVisible: false,
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      },
      // isBaseVersion: false,
    }
  },
  computed: {
    isBaseVersion() {
      return handleIsBaseVersion()
    }
  },
  updated () {
    // if (this.toJobRoleData) {
    //   let str = JSON.stringify(this.toJobRoleData)
    //   let obj = JSON.parse(str)
    //   this.newData = obj
    // }
  },
  watch: {
    // toJobRoleData() {
    //   this.newData = this.toJobRoleData.list
    // },
  },
  methods: {
    dialogVisibleClose () {
      Object.assign(this.$data, this.$options.data())
    },
    // 转换拼音码
    getNameToPinying (event) {
      this.$set(this.newData, 'pinYinCode', this.$pinyin.getJp(event.target.value))
      // this.newData.pinYinCode = this.$pinyin.getJp(event.target.value)
    },
    onSubmit () {
      console.log(this.toJobRoleData.addOrEdit, 'this.toJobRoleData')
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        console.log(this.newData);
        if (valid) {
          if (this.toJobRoleData.jobOrRole == 'role') {
            this.newData.roleName = this.newData.name
            // 如果传入toJobRoleData就说明是要修改
            if (this.toJobRoleData.addOrEdit == 'add') {
              postAction('/role/xghAccountBookRole/add', this.newData).then((res) => {
                if (res.code === 200) {
                  this.$elMessage.success(res.message)
                  this.dialogVisible = !this.dialogVisible
                  this.$emit('onAddSubmit', this.newData, this.toJobRoleData.jobOrRole)
                } else {
                  this.$elMessage.error(res.message)
                }
              })
            } else if (this.toJobRoleData.addOrEdit == 'edit') {
              putAction('/role/xghAccountBookRole/edit', this.newData).then((res) => {
                if (res.code === 200) {
                  this.$elMessage.success(res.message)
                  this.dialogVisible = !this.dialogVisible
                  this.$emit('onAddSubmit', this.newData, this.toJobRoleData.jobOrRole)
                } else {
                  this.$elMessage.error(res.message)
                }
              })
            }
          } else {
            this.newData.positionName = this.newData.name
            // 如果传入toJobRoleData就说明是要修改
            if (this.toJobRoleData.addOrEdit == 'add') {
              postAction('/post/xghAccountBookPost/addPost', this.newData).then((res) => {
                if (res.code === 200) {
                  this.dialogVisible = !this.dialogVisible
                  this.$emit('onAddSubmit', this.newData, this.toJobRoleData.jobOrRole)
                } else {
                  this.$elMessage.error(res.message)
                }
              })
            } else if (this.toJobRoleData.addOrEdit == 'edit') {
              postAction('/post/xghAccountBookPost/editPost', this.newData).then((res) => {
                if (res.code === 200) {
                  this.dialogVisible = !this.dialogVisible
                  this.$emit('onAddSubmit', this.newData, this.toJobRoleData.jobOrRole)
                } else {
                  this.$elMessage.error(res.message)
                }
              })
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    toPermissionSetting () {
      this.$router.push({
        path: '/setting/authoritySet/authority'
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.dialog_div_new {
  width: 100%;
  overflow: auto;
  background: #fff;
  .dialog_middle {
    margin-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: auto;
    .el-button {
      margin-right: 0;
    }
  }
  .dialog_bottom {
    width: 100%;
    box-sizing: border-box;
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    ::v-deep .el-button {
      width: 80px;
      height: 40px;
      text-align: center;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      border-radius: 5px;
      background: #fff;
      border: 1px solid #dddddd;
      color: #666666;
    }
    ::v-deep .el-button--primary {
      background-color: #1890ff;
      border-color: #1890ff;
      color: #fff;
      margin-right: 20px;
    }
    ::v-deep .el-button--default {
      margin-left: 20px;
    }
  }
}
::v-deep .el-form-item {
  display: flex;
  width: 100%;
  margin-top: 10px;
  // margin-bottom: 0;

  .el-form-item__label {
    width: auto;
    min-width: 80px;
    line-height: 40px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666;
    text-align: justify;
    text-justify: distribute-all-lines; /*ie6-8*/
    text-align-last: justify; /* ie9*/
    -moz-text-align-last: justify; /*ff*/
    -webkit-text-align-last: justify; /*chrome 20+*/
    position: relative;
    &::before {
      position: absolute;
      right: 0;
      margin-right: 0;
      color: #ff0000;
      font-weight: 600;
    }
  }
  .el-form-item__content {
    margin: 8px;
    flex: 1;
    height: 30px;
    .el-input {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .el-input__inner {
        height: 100%;
        padding: 0 10px;
        font-size: 12px;
        color: #666;
      }
    }
  }
  &:first-child {
    .el-form-item__content {
      display: flex;
      align-items: center;
      .el-button {
        width: 80px;
        height: 30px;
        border-color: #fc6c21;
        background-color: #fff;
        opacity: 1;
        border-radius: 0.075005rem;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ff6c00;
        opacity: 1;
        margin-left: 0.112507rem;
      }
    }
  }
}
</style>